<template>
  <div class="role-module-input-box">
    <el-tree
      v-loading = "loading"
      class="role-module-input-tree"
      :data="data"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
        <template #default = "{data}">
            <span class="custom-tree-node"> 
              <!-- {node,data} -->
              <span>{{ data.data.name }}</span>
              <span>
                <rolePermissionModuleListCheckbox
                  ref="rolePermissionModuleListCheckbox"
                  :datas="data.data.permissions"
                ></rolePermissionModuleListCheckbox>


               <!-- <el-button
                  type="text"
                  size="mini"
                  @click="() => append(data)">
                  Append
                </el-button> -->
               
                <!-- <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)">
                  Delete
                </el-button> -->
              </span>
            </span>
        </template>



    </el-tree>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

import {listByRidApi} from '@/manager-core/api/rolePermissionModule/rolePermissionModule'



export default defineComponent({
  name: 'roleModuleInput',

  components: {
    
  },

  data(){
    return {  
      id : '' as any,    
      data : [] as any,
      loading : false      
    }
  },

  methods:{
    init(){
      console.log("rmi",this.id)
      if(this.loading){
        return
      }

     this.loading = true;
      if(this.id){
        listByRidApi(this.id)
          .then((r:any)=>{
            // console.log("listByRidApi",r);
            this.data = r;
            this.$nextTick(()=>{
              // this.$refs.rolePermissionModuleListCheckbox.init();
            })
          }).finally(()=>{
            this.loading = false;
          })
      }
      
    },

  },

  mounted(){
    let id = this.$route.query.id;
    if(!id){
      alert("页面错误，请刷新")
    }
    else {
      this.id = id;
      this.init();
    }
  },

  created(){
    let id = this.$route.query.id;
    if(!id){
      alert("页面错误，请刷新")
    }
    else {
      this.id = id;
      this.init();
    }
  },

  setup(){
    // const store = useStore()

    // return {
    //   LoginByUsername:(userObj:any)=> store.dispatch('LoginByUsername')
    // }

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .role-module-input-tree{
    width: 600px;
  }

  .role-module-input-box{
    padding-left: 20px;
  }
</style>
